<template>
	<view>
		<!-- 提现模态框 -->
		<u-modal :show="tx.show" :title="tx.title" @confirm="confirmTX" @cancel="cancelTX" @close="closeTX"
			:closeOnClickOverlay="closeOnClickOverlay" confirmText="立刻提现" cancelText="我再想想"
			:showConfirmButton="showConfirmButton" :showCancelButton="showCancelButton" confirmColor="green">
			<view class="slot-content">
				<rich-text :nodes="tx.content"></rich-text>
			</view>
		</u-modal>
		<!-- <u-loading-page :loading="loading" loading-text=" "></u-loading-page> -->
		<view class="myContent">
			<view class="head_container" v-if="userType == 1">
				<view class="header">
					<view class="left-user" @click.capture="goLoginOrDetail">
						<view>
							<image v-if="userInfo.head_pic" :src="picUrl+userInfo.head_pic" mode="aspectFit"
								class="userinfo-avatar"></image>
							<image v-else :src="picUrl+'/static/image/def.png'" mode="aspectFit"
								class="userinfo-avatar"></image>
						</view>
						<view class="header_left_userInfo">
							<view><text class="myInformation">{{userInfo.user_name}}</text></view>
							<view><text class="info_id" v-if="userInfo.user_id">ID:{{userInfo.user_id}}</text></view>
						</view>
					</view>
					<view class="header_right"><button class="tixian" @click="tixian">我要提现</button></view>
					<view class="changeRole" @click="switchAccount">
						<!-- <uni-icons type="staff-filled"></uni-icons> -->
						<!-- <u-image size class="changeRole" src="/static/image/icon/changeRole.png"></u-image>
						<text>商家</text> -->
						<!-- <uni-icons type="staff-filled">商家</uni-icons> -->
						<u-icon label="商家" size="22" :name="picUrl+'/static/image/icon/changeRole.png'"></u-icon>
					</view>
				</view>
				<view class="middle-num1">
					<view class="join_num">
						<view class="zi">
							<text class="huodongzier">{{joinActivityNum}}<text class="zisan"></text></text>
							<text class="quan">参与活动</text>
						</view>
					</view>
					<view class="middle-num">
						<view class="oner">
							<view class="zi">
								<text class="zier">{{userInfo.zhb_num}}<text class="zisan"></text></text>
								<text class="quan">再花币</text>
							</view>
						</view>
						<view class="twoer">|</view>
						<view class="three">
							<view class="zi">
								<text class="zier">{{userInfo.red_wallet}}\n</text>
								<text class="quan">红包</text>
							</view>
						</view>
						<view class="logo_detail">
							<uni-icons color="white" type="wallet-filled" size="20"></uni-icons>
						</view>
					</view>
				</view>
			</view>

			<view class="head_container" v-if="userType == 2">
				<view class="header">
					<view class="left-user" @click.capture="goLoginOrDetail">
						<view>
							<image v-if="userInfo.head_pic" :src="picUrl+userInfo.head_pic" mode="aspectFit"
								class="userinfo-avatar"></image>
							<image v-else :src="picUrl+'/static/image/def.png'" mode="aspectFit"
								class="userinfo-avatar"></image>
						</view>
						<view class="header_left_userInfo">
							<view><text class="myInformation">{{businessInfo.store_name}}</text></view>
							<view><text class="info_id"
									v-if="businessInfo.offlineBusinessId">ID:{{businessInfo.offlineBusinessId}}</text>
							</view>
						</view>
					</view>
					<view class="header_right"><button class="tixian" @click="chongzhi">充值</button></view>
					<view class="changeRole" @click="switchAccount">
						<!-- <uni-icons type="staff-filled"></uni-icons> -->
						<!-- <u-image class="changeRole" src="/static/image/icon/changeRole.png"></u-image> -->
						<!-- <text>用户</text> -->
						<u-icon label="用户" size="22" :name="picUrl+'/static/image/icon/changeRole.png'"></u-icon>
					</view>
				</view>
				<view class="middle-num1">
					<view class="join_num">
						<view class="zi">
							<text class="huodongzier">{{businessJoinActivityNum}}<text class="zisan"></text></text>
							<text class="quan">参与人数</text>
						</view>
					</view>
					<view class="middle-num">
						<view class="oner_bs">
							<view class="zi">
								<view class="zier_join">
									<text
										class="zier_join2">{{businessInfo.join_platform_guarantee_plan == 1?'已加入':'未加入'}}
										<text class="zisan"></text>
									</text>
								</view>
								<text class="quan">平台保障计划</text>
							</view>
						</view>
						<view class="twoer">|</view>
						<view class="three">
							<view class="zi">
								<text class="zier">{{businessInfo.reverse_amount}}\n</text>
								<text class="quan">备付金余额</text>
							</view>
						</view>
						<view class="logo_detail">
							<uni-icons color="white" type="wallet-filled" size="20"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>

		<div class="list-btn">
			<div class="btns-bg" v-if="userType == 1">
				<div class="btn-item" @click="goMyFunc(item)" v-for="(item, index) in menus" :key="index">
					<div>
						<img :src="picUrl+item.icon" />
						<div>{{ item.name }}</div>
					</div>
				</div>
			</div>
			<div class="btns-bg" v-if="userType == 2">
				<div class="btn-item" @click="goMyFunc(item)" v-for="(item, index) in businessMenus" :key="index">
					<div>
						<img :src="picUrl+item.icon" />
						<div>{{ item.name }}</div>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	import {
		onShow,
		onLoad,
		onUnload,
		onNavigationBarButtonTap
	} from '@dcloudio/uni-app'
	/* import {
		mutations,
		store
	} from "@/uni_modules/uni-id-pages/common/store" */
	const app = getApp();
	export default {
		data() {
			return {
				picUrl: app.globalData.picServiceUrl + app.globalData.fileRootDir,
				showConfirmButton: true,
				showCancelButton: true,
				closeOnClickOverlay: true,
				isLogin: false,
				userType: 1,
				businessInfo: {},
				userInfo: {},
				joinActivityNum: 0,
				businessJoinActivityNum: 0,
				menus: [{
						name: "门店消费",
						icon: "/static/image/icon/ic_gouwu.png",
						url: "/pages/newMy/userConsumeRecord/userConsumeRecord",
						type: 3,
						typeId: 1,
					},
					{
						name: "连接WIFI",
						icon: "/static/image/icon/ic_wifi.png",
						url: "/pages/newMy/wifi/scanWifi",
						type: 2,
						typeId: "连接wifi",
					},
					{
						name: "补贴历史",
						icon: "/static/image/icon/record.png",
						url: "/pages/newMy/userAllowenceRecord/userAllowenceRecord",
						type: 2,
						typeId: "麦当劳",
					}
				],
				businessMenus: [{
						name: "门店信息",
						icon: "/static/image/icon/ic_gouwu.png",
						url: "/pages/zhy_business_info/addOrEdit",
						type: 3,
						typeId: 1,
					},
					{
						name: "收款码下载",
						icon: "/static/image/icon/ic_erweima.png",
						url: "/pages/newIndex/wifi/businessWifiQRCode",
						type: 2,
						typeId: "肯德基",
					},
					{
						name: "补贴记录",
						icon: "/static/image/icon/record.png",
						url: "/pages/newMy/userAllowenceRecord/userAllowenceRecord",
						type: 2,
						typeId: "麦当劳",
					},
					{
						name: "WIFI码",
						icon: "/static/image/icon/ic_wifi.png",
						url: "/pages/newMy/wifi/businessWifiQRCode",
						type: 2,
						typeId: "麦当劳",
					},
					{
						name: "平台订单",
						icon: "/static/image/icon/ic_gouwu.png",
						url: "/pages/newMy/thirdOrder/thirdOrder",
						type: 3,
						typeId: 1,
					},
				],


				userInfo: null,
				userInfoModalShow: false,
				expireTimeString_date: '',
				autoRenew: 0,

				roleType: null,
				businessInfo: null,
				environment: null,
				timer: null,
				// loading: true,
				tx: {
					tittle: '提现',
					content: '提现规则:xxxxx',
					show: false
				}
			}
		},
		onLoad(e) {
			uni.showLoading({
				title: ''
			})
			let that = this
			this.setUserInfo()
			this.login()
			this.timer = setTimeout(function() {

			}, 1000)

		},
		onPullDownRefresh() {
			/* uni.showLoading({
				title: '',
				mask: true
			}) */
			this.setUserInfo()
			if (!this.isLogin) {
				this.$logintool.login()
				this.getActivityNum()
			} else {
				this.getActivityNum()
			}
			/* this.timer = setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000); */
			// uni.hideLoading()
		},
		onShow() {},
		methods: {
			// 获取参与人数和参与活动
			getActivityNum() {
				uni.showLoading({
					title: '',
					mask: true
				})
				let that = this
				let userType = uni.getStorageSync(app.globalData.session.userType);
				let userInfo = uni.getStorageSync(app.globalData.session.userInfo);
				let businessInfo = uni.getStorageSync(app.globalData.session.businessInfo);
				uniCloud.callFunction({
					name: 'zhy-consume-record-query',
					data: {
						queryType: 1,
						userId: userInfo.user_id,
						businessId: businessInfo.offlineBusinessId
					},
					success(res) {
						that.joinActivityNum = res.result.joinActivityNum
						that.businessJoinActivityNum = res.result.joinActivityNum
						uni.hideLoading()
					},
					fail(err) {
						console.log('调用zhy-consume-record-query失败:' + JSON.stringify(err));
						uni.hideLoading()
					}
				})
			},
			login() {
				uni.showLoading({
					title: '',
					mask: true
				})
				if (!this.isLogin) {
					this.$logintool.login().then(res => {
						this.setUserInfo()
						uni.hideLoading()
						this.getActivityNum()
						this.redirectThisPage()
					})
				} else {
					uni.hideLoading()
				}
			},
			redirectThisPage() {
				uni.switchTab({
					url: '/pages/newMy/myCenter'
				})
			},
			// 赋给当前用户赋值
			setUserInfo() {
				this.userType = uni.getStorageSync(app.globalData.session.userAccountType);
				this.userInfo = uni.getStorageSync(app.globalData.session.userInfo);
				this.businessInfo = uni.getStorageSync(app.globalData.session.businessInfo);
				this.userAccountType = uni.getStorageSync(app.globalData.session.userAccountType);
				this.isLogin = this.$logintool.isLogin()
			},
			// 重新加载用户：未登录则自动静默登录
			/* reloadLoginUser() {
				uni.showLoading({
					title: ' ',
					mask: true
				})
				this.isLogin = this.$logintool.isLogin()
				if (this.isLogin) {
					console.log('未登录。。。');
				}
				this.$logintool.reloadLoginUser()
				this.userType = uni.getStorageSync(app.globalData.session.userAccountType);
				this.userInfo = uni.getStorageSync(app.globalData.session.userInfo);
				this.businessInfo = uni.getStorageSync(app.globalData.session.businessInfo);
				this.userAccountType = uni.getStorageSync(app.globalData.session.userAccountType);
				this.isLogin = this.$logintool.isLogin()
				if (!this.$logintool.isLogin) {
					this.reloadLoginUser(true)
				}
				uni.hideLoading()
			}, */
			goMyFunc(item) {
				if (this.isLogin) {
					uni.navigateTo({
						url: item.url,
						fail(res) {
							console.log('跳转失败:' + JSON.stringify(res));
						}
					})
				} else {
					uni.showToast({
						title: '请先登录',
						icon: 'none',
						duration: 1000
					})
				}
			},
			goLoginOrDetail() {
				uni.showLoading({
					title: ' ',
					mask: true
				})
				console.log('islogin' + this.isLogin);
				if (!this.isLogin) {
					console.log('islogin' + this.isLogin);
					uni.navigateTo({
						url: '/uni_modules/uni-id-pages/pages/login/login-withoutpwd',
						success: (res) => {
							console.log('success：' + JSON.stringify(res))
						},
						fail: (res) => {
							console.log('fail：' + JSON.stringify(res))
						},
						complete: (res) => {
							console.log('complete：' + JSON.stringify(res))
						},
					})
				} else {
					// 退出登录
					// this.logout()
				}
				uni.hideLoading()
			},
			switchAccount() {
				uni.showLoading({
					title: ' ',
					mask: true
				})
				// uni.showLoading({
				// 	title: '切换中，请稍后...',
				// 	mask: true
				// })
				if (this.userType == 1) {
					// 用户切换为商家:判断有没有商户信息，没有则新增
					let sessionUserType = uni.getStorageSync(app.globalData.session.userType);
					if (sessionUserType == 1) {
						// 没有商户信息，跳转到新增商户信息页面
						console.log('没有商户');
						uni.showModal({
							title: '提示',
							content: '您目前尚未进行商家入驻，是否立即前往？',
							success: function(res) {
								if (res.confirm) {
									// 执行确认后的操作
									// 跳转到商家入驻页面
									uni.navigateTo({
										url: '/pages/zhy_business_info/addOrEdit'
									})
								} else {
									// 执行取消后的操作
									uni.showToast({
										title: '已取消',
										icon: 'none',
										duration: 1000
									})
								}
							}
						})
					} else {
						// 存在商户信息，直接切换即可
						this.userType = 2
						uni.setStorageSync(app.globalData.session.userAccountType, 2, app.globalData.session_exp)
					}
				} else if (this.userType == 2) {
					// 商家切换为用户:直接切换即可
					this.userType = 1;
					uni.setStorageSync(app.globalData.session.userAccountType, 1, app.globalData.session_exp)
				}
				this.sleep(1000)
				uni.hideLoading()
				// this.loading = true
			},
			sleep(ms) { //sleep延迟方法
				var unixtime_ms = new Date().getTime();
				while (new Date().getTime() < unixtime_ms + ms) {}
			},
			// 我要提现
			tixian() {
				console.log('点击我要提现');
				// 跳转提现页面:在页面中提现，不是全部提现，是每个消费记录提现
				uni.navigateTo({
					url: '/pages/newMy/tixian/tixian'
				})
				if (true) {
					return
				}
				// test
				// this.userInfo.zhb_num = 0.01
				// 查看在花币数量
				if (this.userInfo.zhb_num <= 0) {
					uni.showToast({
						title: '您的在花币不足',
						icon: 'none',
						mask: true
					})
					return
				}
				this.tx.content =
					'亲，你参与的“霸王补贴”活动还未补满哦，中途提现将会导致退出补贴队列，中断“霸王补贴”活动，不再继续享受补贴了哦！' +
					'<br/>您确定要现在提现吗？'
				this.tx.show = true
				this.tittle = '确认提现'
			},
			confirmTX() {
				// 提现--然后关闭模态框
				this.tx.show = false;
				console.log('确认提现..在花币..全部提现');
				let total_amount = this.$mytools.regYuanToFen(this.userInfo.zhb_num, 100)
				let txParam = {
					// user用户 tx提现
					out_batch_no: this.$idGenerator.createUniqueId('usertx'),
					batch_name: '用户提现',
					batch_remark: '感谢参与霸王补贴',
					total_amount: total_amount, //单位：分
					total_num: 1,
					transfer_detail_list: [{
						out_detail_no: this.$idGenerator.createUniqueId('usertx'),
						transfer_amount: total_amount,
						transfer_remark: this.$mytools.formatTimestampToDateStr(new Date().getTime()) +
							'日一次性提现',
						openid: uni.getStorageSync(app.globalData.session.userKey),
						user_name: null //>2000元才必须
					}]
				}
				let that = this
				this.$zhyPay.userWithdrawToCash(txParam).then(res => {
					console.log('提现成功');
					console.log(JSON.stringify(res));
					this.$logintool.login().then(res => {
						console.log('重新登录完成');
						that.timer = setTimeout(() => {
							that.redirectThisPage()
						}, 500)
					})
				}).catch(err => {
					console.log('提现失败');
					console.log(JSON.stringify(err));
					uni.showToast({
						title: '提现失败',
						icon: 'none'
					})
				})
			},
			cancelTX() {
				console.log('取消...');
				this.tx.show = false
				uni.showToast({
					title: '您已取消',
					icon: 'none'
				})
			},
			closeTX() {
				console.log('点击遮罩层，关闭');
				this.tx.show = false
			},
			chongzhi() {
				console.log('点击充值');
				uni.navigateTo({
					url: '/pages/newMy/businessRecharge/businessRecharge'
				})
			}
		},
		onHide() {
			// 销毁
			console.log('onHide销毁');
			if (this.timer) {
				clearTimeout(this.timer);
				this.timer = null;
			}
		},
		computed: {}
	}
</script>

<style>
	page {
		background: #eaeaea;
	}

	.myContent {
		width: 100%;
		height: 100%;
		margin: 0 auto;
	}

	.header {
		/* flex-direction: row; */
		display: flex;
		height: 200rpx;
	}

	.headbgImage {
		height: 25%;
		width: 100%;
		position: absolute;
		z-index: 1;
	}

	.myPhoto {
		height: 90rpx;
		width: 90rpx;
		position: absolute;
		z-index: 2;
		margin-left: 3%;
		margin-top: 3%;
	}

	.myInformation {
		/* position: absolute; */
		/* z-index: 2; */
		/* margin-left: 16%; */
		/* margin-top: 9%; */
	}

	.oner {
		flex-grow: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	.twoer {
		flex-grow: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 50%;
		height: 100%;
		color: #eaeaea;
	}

	.three {
		flex-grow: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	.huodongzier {
		font-size: 48rpx;
		color: #333333;
	}

	.zier {
		font-size: 40rpx;
		color: white;
	}

	.zisan {
		font-size: 24rpx;
		color: #333333;
	}

	.quan {
		font-size: 24rpx;
		color: #999999;
	}

	.zi {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.myFuncList {
		display: flex;
		flex-wrap: nowrap;
		background: #fff;
		width: 95%;
		height: 250rpx;
		margin-left: 20rpx;
		border-radius: 10px;
		margin-top: 50rpx;
		flex-direction: column;
	}

	.myFuncList .row1 .van-cell {
		position: inherit;
		border-radius: 10px 10px 0px 0px;
	}

	.func_list {
		margin-top: 5rpx
	}

	.liebiao {
		height: 658rpx;
		align-items: center;
		flex-wrap: nowrap;
		background: #fff;
		width: 91%;
		border-radius: 10px;
		flex-direction: column;
		padding: 2%;
		margin: 20rpx 20rpx 10rpx 20rpx;
	}

	.liebiao .van-cell {
		height: 16%;
	}

	.middle-num {
		/* position: absolute; */
		z-index: 2;
		display: flex;
		flex-wrap: nowrap;
		background: #000;
		width: 70%;
		/* margin-right: 1000rpx; */
		/* height: 160rpx; */
		border-radius: 10px;
		/* margin-top: -60rpx; */
	}

	.head_container {
		border-radius: 15rpx;
		width: 95%;
		margin-top: 10rpx;
		margin-left: 20rpx;
		margin-top: 30rpx;
		padding-bottom: 30rpx;
		background: white;
		margin-bottom: 40rpx;
	}

	.join_num {
		flex-grow: 1;
		justify-content: center;
		background-color: white;
		margin-top: 34rpx;

	}

	.middle-num1 {
		display: flex;
		margin-right: 2%;
		height: 160rpx;
	}

	.logo_detail {
		margin-right: 15rpx;
		margin-top: 2rpx;
	}

	.userinfo-avatar {
		display: inline-block;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 10px;
	}

	.left-user {
		display: flex;
		align-items: center;
		color: #333;
		font-size: 14px;
		font-weight: bold;
		/* margin-left: 50rpx; */
		align-self: center;
		width: 65%;
		padding-left: 5%;
	}

	.info_id {}

	.header_right {
		/* display: flex; */
		justify-content: center;
		align-items: center;
		align-self: center;
		width: 30%;
	}

	.tixian {
		background-color: black;
		color: white;
		font-size: 32rpx;
		font-weight: 500;
		border-radius: 20rpx;
		/* margin-left: 90rpx; */
	}

	.list-btn {
		width: 100%;
		margin: 15px 0;
	}

	.btns-bg {
		margin: 0 10px;
		background-color: #fff;
		box-shadow: 0px 3px 5px 0px rgba(207, 207, 207, 0.39);
		border-radius: 15px;
		padding: 20px 0;
	}

	.btn-item {
		width: 33%;
		text-align: center;
		display: inline-block;
		margin-bottom: 20px;
		font-size: 30rpx;
	}

	.btn-item img {
		width: 80rpx;
		height: 80rpx;
		object-fit: cover;
	}

	.zier_join {
		font-size: 30rpx;
		color: black;
		background-color: white;
		border-radius: 14rpx;
		width: 75%;
		align-items: center;
		align-self: center;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.oner_bs {
		margin-left: 15rpx;
		flex-grow: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	.changeRole {
		position: absolute;
		top: 0;
		right: 0;
		margin-right: 3%;
		margin-top: 30rpx;
		font-size: 28rpx;
	}

	/* .changeRole {
		width: 40rpx;
		height: 40rpx;
	} */
</style>